<!-- 本DEMO演示简单过滤下拉选择器的用法 -->
<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">{{title}} <span class="text-subtitle1">用于演示简单过滤下拉选择器的功能(内部使用)</span></div>
    <div class="shadow-2 q-pa-sm">
      <div class="row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-6 col-md-4 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">带输入下拉</div>
          <div class="col-8">
            <simple-filter-select :option-label="getOptionLabel" :options="$d.currencyList" option-value="codeValue"
              v-model="currency1" :search-label-and-value="true" />
          </div>
        </div>
        <div class="col-xs-12 col-md-grow">
          <pre v-text="codeDisp1"></pre>
        </div>
      </div>
      <div class="row q-col-gutter-sm q-mt-xs">
        <div class="col-xs-12 col-sm-6 col-md-4 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">不带输入下拉</div>
          <div class="col-8">
            <simple-filter-select option-label="codeName1" :options="$d.currencyList" option-value="codeValue"
              v-model="currency2" :use-filter="false" :options-dense="false" />
          </div>
        </div>
        <div class="col-xs-12 col-md-grow">
          <pre v-text="codeDisp2"></pre>
        </div>
      </div>
      <div class="row q-col-gutter-sm q-mt-xs">
        <div class="col-xs-12 col-sm-6 col-md-4 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">单选项自填(默认启用)</div>
          <div class="col-8">
            <simple-filter-select option-label="name" :options="$d.departmentList" option-value="value"
              v-model="department" :use-filter="false" :trigger-auto-sel-every-ops-chg="true" />
          </div>
          <div>
            <q-btn color="primary" @click="setNewOptionsSingle1">修改options值为其它(single1)</q-btn>
            <q-btn class="q-ml-xs" color="primary" @click="setNewOptionsSingle2">修改options值为其它(single2)</q-btn>
          </div>
        </div>
        <div class="col-xs-12 col-md-grow">
          <pre v-text="codeDisp3"></pre>
        </div>
      </div>

      <div class="row q-col-gutter-sm q-mt-xs">
        <div class="col-xs-12 col-sm-6 col-md-4 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">多选项填第一个</div>
          <div class="col-8">
            <simple-filter-select option-label="name" :options="$d.companyList" option-value="value" v-model="company"
              :use-filter="true" :auto-select-first-option="true" :trigger-auto-sel-every-ops-chg="true" />
          </div>
          <div>
            <q-btn color="primary" @click="setNewOptionsMulti1">修改options值为其它(multi1)</q-btn>
            <q-btn class="q-ml-xs" color="primary" @click="setNewOptionsMulti2">修改options值为其它(multi2)</q-btn>
          </div>
        </div>
        <div class="col-xs-12 col-md-grow">
          <pre v-text="codeDisp4"></pre>
        </div>
      </div>

      <div class="row q-col-gutter-sm q-mt-xs">
        <div class="col-xs-12 col-sm-6 col-md-4 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">从服务器获取(带默认值)</div>
          <div class="col-8">
            <simple-filter-select :option-label="item => item.cityName + '(' + item.zoneCode + ')'"
              :options="selectedCityCodeInitOptions" option-value="zoneCode" v-model="selectedCityCode"
              @input="logSomething" server-side-url="/dropdown-test/get-chinese-city-list"
              search-content-field="codeOrName" resp-data-field="cities" :req-params="{pageNo:1,pageSize:15}" />
          </div>
        </div>
        <div class="col-xs-12 col-md-grow">
          <pre v-text="codeDisp5"></pre>
        </div>
      </div>

      <div class="row q-col-gutter-sm q-mt-xs">
        <div class="col-xs-12 col-sm-6 col-md-4 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">填任意值</div>
          <div class="col-8">
            <simple-filter-select option-label="name" :options="$d.companyList" option-value="value" v-model="company2"
              :use-filter="true" :allow-raw-text="true" search-label-and-value auto-select-single-option/>
          </div>
        </div>
        <div class="col-xs-12 col-md-grow">
          <pre v-text="codeDisp6"></pre>
        </div>
      </div>

      <div class="row q-col-gutter-sm q-mt-xs">
        <div class="col-xs-12 col-sm-6 col-md-4 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">填任意值(服务器数据源)</div>
          <div class="col-8">
            <simple-filter-select option-label="cityName"
              :options="selectedCityCodeInitOptions" option-value="zoneCode" v-model="selectedCityRaw"
              server-side-url="/dropdown-test/get-chinese-city-list" search-content-field="codeOrName"
              resp-data-field="cities" :req-params="{pageNo:1,pageSize:15}"
              :use-filter="true" :allow-raw-text="true" />
          </div>
        </div>
        <div class="col-xs-12 col-md-grow">
          <pre v-text="codeDisp7"></pre>
        </div>
      </div>

      <div class="row q-col-gutter-sm q-mt-xs">
        <div class="col-xs-12 col-sm-6 col-md-4 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">厂商选择</div>
          <div class="col-8">
            <simple-filter-select :option-label="(v)=>mfLiteDisp(v)" :options="$d.mfDropdownList" option-value="mfId"
              v-model="selectedMf" :use-filter="true" />
          </div>
        </div>
        <div class="col-xs-12 col-md-grow">
          <pre v-text="codeDisp8"></pre>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts" setup>
import {Ref, ref, reactive} from 'vue'
import {useTitleHelper} from '../../lib/hooks/titleHelper'
import {CodeLineForDropdown, MfLite} from '../../lib/helper/dropdownlist.d'
import SimpleFilterSelect from '../../lib/components/SimpleFilterSelect.vue'

const title = '简单过滤下拉选择器'
useTitleHelper(title)

const currency1: Ref<string | null> = ref(null)
const codeDisp1 = `<simple-filter-select
  :option-label="getOptionLabel"
  :options="$d.currencyList"
  option-value="codeValue"
  v-model="currency1"
  :search-label-and-value="true" />

const getOptionLabel = function (item: CodeLineForDropdown) {
  return item.codeName2 + '(' + item.codeName1 + ')'
}`

const currency2: Ref<string | null> = ref(null)
const codeDisp2 = `<simple-filter-select
  option-label="codeName1"
  :options="$d.currencyList"
  option-value="codeValue"
  v-model="currency2"
  :use-filter="false"
  :options-dense="false" />`

const department: Ref<string | null> = ref(null)
const codeDisp3 = `<simple-filter-select
  option-label="name"
  :options="$d.departmentList"
  option-value="value"
  v-model="department"
  :use-filter="false"
  :trigger-auto-sel-every-ops-chg="true" />`

const company = ref(null)
const codeDisp4 = `<simple-filter-select
  option-label="name"
  :options="$d.companyList"
  option-value="value"
  v-model="company"
  :use-filter="true"
  :auto-select-first-option="true"
  :trigger-auto-sel-every-ops-chg="true" />`

const selectedCityCode = ref('450722')
const codeDisp5 = `<simple-filter-select
  :option-label="item => item.cityName + '(' + item.zoneCode + ')'"
  :options="selectedCityCodeInitOptions"
  option-value="zoneCode"
  v-model="selectedCityCode"
  @input="logSomething"
  server-side-url="/dropdown-test/get-chinese-city-list"
  search-content-field="codeOrName"
  resp-data-field="cities"
  :req-params="{pageNo:1,pageSize:15}" />`

const company2 = ref(null)
const codeDisp6 = `<simple-filter-select
  option-label="name"
  :options="$d.companyList"
  search-label-and-value
  auto-select-single-option
  option-value="value"
  v-model="company2"
  :use-filter="true"
  :allow-raw-text="true" />`

const selectedCityRaw = ref('')
const codeDisp7 = `<simple-filter-select option-label="cityName"
  :options="selectedCityCodeInitOptions"
  option-value="zoneCode"
  v-model="selectedCityRaw"
  @input="logSomething"
  server-side-url="/dropdown-test/get-chinese-city-list"
  search-content-field="codeOrName"
  resp-data-field="cities"
  :req-params="{pageNo:1,pageSize:15}"
  :use-filter="true"
  :allow-raw-text="true" />`

const selectedCityCodeInitOptions = [{zoneCode: '450722', cityName: '浦北县'}]

const selectedMf = ref(null)
const codeDisp8 = `<simple-filter-select
  :option-label="(v)=>mfLiteDisp(v)"
  :options="$d.mfDropdownList"
  option-value="mfId"
  v-model="selectedMf"
  :use-filter="true" />`


interface CompanyItem {
  name: string
  value: string | number
}

const $d = reactive({
  currencyList: [] as CodeLineForDropdown[],
  departmentList: [{
    name: '研发部',
    value: 'rnd',
  }],
  companyList: [
    {
      name: '上海恩及通信息技术有限公司',
      value: 1,
    },
    {
      name: '基通物流(上海)有限公司',
      value: 2,
    },
    {
      name: '上海及时通物流有限公司',
      value: 3,
    },
    {
      name: '中国上海人见人爱花见花开前途无量银两多多超级无敌有限公司',
      value: 4,
    },
  ] as CompanyItem[],
  // 客商下拉
  mfDropdownList: [] as MfLite[],
})

const logSomething = function (v: string) {
  console.log(' ****** ' + v)
}

const setNewOptionsSingle1 = function () {
  $d.departmentList = [
    {
      name: '市场部',
      value: 'marketing',
    },
  ]
}

const setNewOptionsSingle2 = function () {
  $d.departmentList = [
    {
      name: '车间',
      value: 'workshop',
    },
  ]
}

const setNewOptionsMulti1 = function () {
  $d.companyList = [
    {
      name: '上海道骊供应链有限公司',
      value: 'tolead',
    },
    {
      name: '上海通维物流有限公司',
      value: 'towin',
    },
    {
      name: '上海及时通物流有限公司',
      value: 'jit',
    },
  ]
}

const setNewOptionsMulti2 = function () {
  $d.companyList = [
    {
      name: '近铁(上海)物流有限公司',
      value: 'kwe',
    },
    {
      name: '英运(上海)物流有限公司',
      value: 'dhl',
    },
    {
      name: '上海及时通物流有限公司',
      value: 'jit',
    },
  ]
}

const getOptionLabel = function (item: CodeLineForDropdown) {
  return item.codeName2 + '(' + item.codeName1 + ')'
}

// 格式化准备
$f.fmt.prepareCurrencyFmt()

// 获取币别
$f.lst.getCodeForDropdown('Currency').then((resp) => {
  $d.currencyList = resp
}).catch(() => {
  //ignore
})

// 为了测试数据权限，只管供应商或客户
$f.lst.getMfSimpleList({isVendor: true, isCustomer: true, isMfTypeRelationAnd: false}).then((resp) => {
  $d.mfDropdownList = resp.mfLiteList
}).catch(() => {
  //ignore
})

const mfLiteDisp = $f.fmt.mfLiteDisp

</script>

<style lang="sass" scoped>
pre
  margin: 0
  background-color: $grey-2
</style>
